<template>
	<view class="middle">
		<view class="mineMore">
			<view class="mineMoreAll" v-if="userinfoAll.msgs">
				<text class="mineMoreAll_left">失败原因：{{userinfoAll.msgs}}</text>
			</view>
			<view class="mineMoreAll">
				<text class="mineMoreAll_left">姓名</text>
				<view class="mineMoreAll_right">
					<input type="text" v-model="addapplyAll.name" placeholder="请输入姓名">
				</view>
			</view>
			<view class="mineMoreAll">
				<text class="mineMoreAll_left">电话</text>
				<view class="mineMoreAll_right">
					<input type="number" v-model="addapplyAll.phone" placeholder="请输入电话" maxlength="11">
				</view>
			</view>
			<view class="mineMoreAll">
				<text class="mineMoreAll_left">身份证号</text>
				<view class="mineMoreAll_right">
					<input type="text" v-model="addapplyAll.idcode" placeholder="请输入身份证号">
				</view>
			</view>
			<!-- <view class="mineMoreAll" style="border-bottom: 2rpx solid #F4F4F7;">
				<text class="mineMoreAll_left">身份证正反面照片</text>
				<u-upload :fileList="fileList_new5" @afterRead="afterRead" @delete="deletePic" name="2" multiple
					:maxCount="3">
				</u-upload>
			</view> -->

			<view class="mineMoreAll">
				<view class="mineMoreAll_left">身份证正面</view>
				<!-- <view @click='upload' class="mineMoreAll_Img">
					<image :src="addapplyAll.id_picture_z ? addapplyAll.id_picture_z : '../../static/zhengmian.jpg'"
						mode="">
					</image>
				</view> -->
				<u-upload :fileList="fileList_new6" @afterRead="afterRead" @delete="deletePic" name="_new6" multiple
					:maxCount="1">
				</u-upload>
			</view>
			<!-- <view class="mineMoreAll" v-else>
				<view class="mineMoreAll_left">身份证正面</view>
				<view @click='upload' class="mineMoreAll_Img">
					<image :src="addapplyAll.id_picture_z" mode="">
					</image>
				</view>
			</view> -->

			<!-- <view class="mineMoreAll" v-if="userinfoAll.taker_id!=null">
				<view class="mineMoreAll_left">身份证反面</view>
				<view @click='upload3' class="mineMoreAll_Img">
					<image :src="addapplyAll.id_picture_f ? addapplyAll.id_picture_f : '../../static/fanmian.jpg'"
						mode="">
					</image>
				</view>
				
				
			</view> -->

			<view class="mineMoreAll">
				<view class="mineMoreAll_left">身份证反面</view>
				<!-- <view @click='upload3' class="mineMoreAll_Img">
					<image :src="addapplyAll.id_picture_f" mode=""></image>
				</view> -->
				<u-upload :fileList="fileList_new7" @afterRead="afterRead" @delete="deletePic" name="_new7" multiple
					:maxCount="1">
				</u-upload>
			</view>



			<view class="mineMoreAll" style="border-bottom: 2rpx solid #F4F4F7;">
				<text class="mineMoreAll_left">正装工作照</text>
				<u-upload :fileList="fileList_new3" @afterRead="afterRead" @delete="deletePic" name="_new3" multiple
					:maxCount="1">
				</u-upload>
			</view>
			<view class="mineMoreAll" style="border-bottom: 2rpx solid #F4F4F7;">
				<text class="mineMoreAll_left">资质证书<text>(收款码（必需），陪诊师证、月嫂证、护理员证等照片)</text></text>
				<u-upload :fileList="fileList_new5" @afterRead="afterRead" @delete="deletePic" name="_new5" multiple
					:maxCount="20">
				</u-upload>
			</view>
			<view class="radioSelect">
				<view class="radioSelect_img">
					<image src="../../static/yixuan.png" mode="" v-show="showUpImg2" @click="changeImg2"></image>
					<image src="../../static/weixuan.png" mode="" v-show="!showUpImg2" @click="changeImg2">
					</image>
				</view>
				<view>
					个人承诺:本人已认真阅读和知晓平台劳务合同内容，身体健康，无急、慢性病史，有完全劳动能力胜任平台的各项服务工作，签订劳务合同和入驻平台签名如下:<text
						@click="privacyProtocol">《劳务合同》</text>
				</view>
			</view>
			<view class="mineMoreAll2">
				<view class="mineMoreAll2_All">
					<text class="mineMoreAll_left">签名确认</text>
					<text class="mineMoreAll_qian" @click="showGetconts=true">立即签名</text>
				</view>

				<view class="mineMoreAll_right">
					<image :src="imgUrl" mode=""></image>
				</view>
			</view>
		</view>



		<view class="middle_Btn">
			<!-- <button class="middle_Btn_one" open-type="getPhoneNumber" @getphonenumber="getPhoneNumbers">
				<text>微信授权用户信息</text>
			</button> -->

			<!-- <view class="radioSelect">
				<view class="radioSelect_img">
					<image src="../../static/yixuan.png" mode="" v-show="showUpImg2" @click="changeImg2"></image>
					<image src="../../static/weixuan.png" mode="" v-show="!showUpImg2" @click="changeImg2">
					</image>
				</view>
				<view>
					个人承诺:本人已认真阅读和知晓平台劳务合同内容，身体健康，无急、慢性病史，有完全劳动能力胜任平台的各项服务工作，签订劳务合同和入驻平台签名如下:<text
						@click="privacyProtocol">《劳务合同》</text>
				</view>
			</view> -->


			<text v-if="userinfoAll.taker_id" class="middle_Btn_one" @click="editapplyAPI">提交审核</text>
			<text v-else class="middle_Btn_one" @click="addapplyAPI">保存</text>
			<!-- <text class="middle_Btn_one" @click="addapplyAPI">保存</text> -->
		</view>


		<u-popup :show="showGetconts" mode="center" round="40rpx" @close="close" @open="open">
			<view>
				<jushi-signature :settings="settings" base64 @change="signatureChange"></jushi-signature>
				<view class="" style="margin-top: 20rpx;">
					<text class="text">保存后的签名图片</text>
					<view class="preview">
						<image :src="imgUrl" mode="" style="width: 100%;"></image>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {
			// civic
		},
		data() {
			return {
				showUpImg2: false,

				// fileList2: [],
				fileList_new5: [],
       

				// fileList3: [],
				fileList_new3: [],
				fileList_new6: [],
				fileList_new7: [],

				addapplyAll: { 
					name: '',
					phone: '',
					idcode: '',
					id_picture_z: '',
					id_picture_f: '',
					photo: '',
					zz_picture: '',
					intro: ''
				},
				userinfoAll: '',

				// 
				showGetconts: false,
				settings: { //签名设置
					width: '750', //签名区域的宽
					height: '500', //签名区域的高
					lineWidth: 3, //签名时线宽
					textColor: '#007AFF' //签名文字颜色
				},
				imgUrl: '',
				baseUrl:''
			}
		},

		onReady() {

		},
		created() {},
		onLoad() {
			this.baseUrl=this.https
			this.userinfoAll = uni.getStorageSync('userinfoAll');
			console.log(this.userinfoAll, "============1111")
			if (this.userinfoAll.taker_id) {
				this.editapplyApi2()
			}
		},
		methods: {

			// 签名
			signatureChange(e) {
				const that = this
				that.showGetconts = false

				// console.log(e,"签名结果")

				// 假设base64Data是你的base64字符串
				const base64Data = e;

				// 获取文件系统管理器
				const fileManager = uni.getFileSystemManager();

				// 获取临时文件路径
				const filePath = `${uni.env.USER_DATA_PATH}/temp_image.png`;

				// 去除base64字符串的头部（如data:image/png;base64,）
				const base64Body = base64Data.split(',')[1];

				// 将base64字符串写入本地文件
				fileManager.writeFile({
					filePath: filePath,
					data: base64Body,
					encoding: 'base64',
					success: () => {
						// 文件写入成功后上传文件
						uni.uploadFile({
							url: this.baseUrl+'/api/common/upload', // 服务器接收上传文件的URL
							filePath: filePath,
							name: 'file', // 这里根据服务器接口要求设置
							success: (uploadFileRes) => {
								that.imgUrl = JSON.parse(uploadFileRes['data'])['data']['fullurl']
								// console.log('上传成功', that.imgUrl);
							},
							fail: (uploadFileErr) => {
								console.error('上传失败', uploadFileErr);
							}
						});
					},
					fail: (writeFileErr) => {
						console.error('写入文件失败', writeFileErr);
					}
				});


				// uploadFilePromise(url) {
				// 	return new Promise((resolve, reject) => {
				// 		uni.uploadFile({
				// 			url: 'https://pz.jzshangmen.cn/api/common/upload', // 仅为示例，非真实的接口地址
				// 			filePath: url,
				// 			name: 'file',
				// 			formData: {
				// 				user: 'test'
				// 			},
				// 			header: {
				// 				"Content-Type": "application/form-data",
				// 				// 'token': this.token
				// 			},
				// 			success: (res) => resolve(JSON.parse(res.data).data.fullurl)
				// 		});
				// 	})
				// },

			},
			open() {
				// console.log('open');
			},
			close() {
				this.showGetconts = false
				// console.log('close');
			},

			changeImg2() {
				this.showUpImg2 = !this.showUpImg2
				console.log(this.showUpImg2, "==")
			},
			privacyProtocol() {
				uni.navigateTo({
					url: "/pages/My/privacyProtocol"
				})
			},
			// 审核回显
			editapplyApi2() {
				this.get('/api/Newadd/editapply', {
					user_id: this.userinfoAll.user_id,
				}).then((res) => {
					this.addapplyAll = res;
					this.fileList_new3 = [{
						url: res.photo
					}]
					this.fileList_new5 = [{
						url: res.zz_picture
					}];
					this.fileList_new6 = [{
						url: res.id_picture_z
					}];
					this.fileList_new7 = [{
						url: res.id_picture_f
					}];

					console.log(res, "===============？？？？？？？？？？？？？？？？？？？？")

					this.imgUrl = res.hetong

					// this.fileList_new3.forEach((item) => {
					// 	this.fileList_new3.push({
					// 		url: item.url,
					// 	})
					// })

					// this.fileList_new5.forEach((item) => {
					// 	this.fileList_new5.push({
					// 		url: item.url,
					// 	})
					// })

					// this.fileList_new5 = res.zz_picture.map(it => it.url);
					// this.fileList_new3 = res.photo.map(it => it.url);


				})
			},

			// 假设base64Data是你的base64字符串，path是你想要保存图片的路径
			// base64ToImage(base64Data, path) {
			// 	const fs = uni.getFileSystemManager();
			// 	const filePath = `${uni.env.USER_DATA_PATH}/${path}`; // 设置图片保存的路径
			// 	const base64 = base64Data.split(',')[1]; // 获取base64字符串部分
			// 	fs.writeFile({
			// 		filePath: filePath,
			// 		data: base64,
			// 		encoding: 'base64',
			// 		success: (res) => {
			// 			this.imgUrl = filePath
			// 			this.post('https://pz.jzshangmen.cn/api/common/upload', {
			// 				file: filePath,
			// 				formData: {
			// 					user: 'test'
			// 				},
			// 				header: {
			// 					"Content-Type": "application/form-data",
			// 				},
			// 			}).then((res) => {
			// 				// this.DataList = res.data
			// 				console.log('图片保存成功', res);
			// 			})
			// 			console.log('图片保存成功', filePath);
			// 			// 成功的回调，可以在这里进行后续操作，例如显示图片等
			// 		},
			// 		fail: (err) => {
			// 			console.error('图片保存失败', err);
			// 		}
			// 	});
			// },

			// 使用示例
			// const base64Str = '...'; // 这里应该是你的完整base64字符串
			// base64ToImage(base64Str, 'example.png');


			// 修改
			editapplyAPI() {

				// console.log(encodeURIComponent(this.imgUrl))
				// return


				// this.base64ToImage(this.imgUrl, 'example.png')

				let image = this.fileList_new5.map(it => it.url);
				// this.fileList_new5.forEach((item) => {
				// 	image.push(item.url)
				// })

				let image3 = this.fileList_new3.map(it => it.url);

				let image6 = this.fileList_new6.map(it => it.url);
				let image7 = this.fileList_new7.map(it => it.url);
				// let image3 = []
				// this.fileList_new3.forEach((item) => {
				// 	image3.push(item.url)
				// })

				if (!this.showUpImg2) {
					uni.$u.toast('请选择承诺')
					return
				} else if (this.addapplyAll.name == '') {
					uni.$u.toast('请输入姓名')
					return
				} else if (this.addapplyAll.phone == '') {
					uni.$u.toast('请输入手机号')
					return
				} else if (this.addapplyAll.idcode == '') {
					uni.$u.toast('请输入身份证号')
					return
				} else if (this.fileList_new6 == '') {
					uni.$u.toast('请上传身份证正面')
					return
				} else if (this.fileList_new6 == '') {
					uni.$u.toast('请上传身份证反面')
					return
				} else if (this.fileList_new3 == '') {
					uni.$u.toast('请选择正装工作照')
					return
				} else if (this.fileList_new5 == '') {
					uni.$u.toast('请选择资质证书')
					return
				} else if (this.imgUrl == '') {
					uni.$u.toast('请签名')
					return
				}
				this.post('/api/newadd/editapply', {
					name: this.addapplyAll.name,
					phone: this.addapplyAll.phone,
					idcode: this.addapplyAll.idcode,
					id_picture_z: image6,
					id_picture_f: image7,
					photo: image3,
					zz_picture: image,
					intro: '个人承诺:本人已认真阅读和知晓平台劳务合同内容，身体健康，无急、慢性病史，有完全劳动能力胜任平台的各项服务工作',
					user_id: this.userinfoAll.user_id,
					hetong: this.imgUrl
				}).then((res) => {
					console.log(res, "======")

					// return
					// this.DataList = res.data
					if (res != '') {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/My/My'
							});
						}, 1000)
					}
				})
			},

			// 保存
			addapplyAPI() {
				// this.base64ToImage(this.imgUrl, 'example.png')

				let image = this.fileList_new5.map(it => it.url);

				let image3 = this.fileList_new3.map(it => it.url);

				let image6 = this.fileList_new6.map(it => it.url);
				let image7 = this.fileList_new7.map(it => it.url);

				if (this.showUpImg2 == false) {
					uni.$u.toast('请选择承诺')
					return
				} else if (this.addapplyAll.name == '') {
					uni.$u.toast('请输入姓名')
					return
				} else if (this.addapplyAll.phone == '') {
					uni.$u.toast('请输入手机号')
					return
				} else if (this.addapplyAll.idcode == '') {
					uni.$u.toast('请输入身份证号')
					return
				} else if (this.fileList_new6 == '') {
					uni.$u.toast('请上传身份证正面')
					return
				} else if (this.fileList_new6 == '') {
					uni.$u.toast('请上传身份证反面')
					return
				} else if (this.fileList_new3 == '') {
					uni.$u.toast('请选择正装工作照')
					return
				} else if (this.fileList_new5 == '') {
					uni.$u.toast('请选择资质证书')
					return
				} else if (this.imgUrl == '') {
					uni.$u.toast('请签名')
					return
				}
				this.post('/api/newadd/addapply', {
					name: this.addapplyAll.name,
					phone: this.addapplyAll.phone,
					idcode: this.addapplyAll.idcode,
					id_picture_z: image6,
					id_picture_f: image7,
					photo: image3,
					zz_picture: image,
					intro: '个人承诺:本人已认真阅读和知晓平台劳务合同内容，身体健康，无急、慢性病史，有完全劳动能力胜任平台的各项服务工作',
					user_id: this.userinfoAll.user_id,
					hetong: this.imgUrl

				}).then((res) => {
					if (res != '') {
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/My/My'
							});
						}, 1000)
					}
				})
			},




			// 身份证正反面照片
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				// this.fileList_new5.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				const key = `fileList${event.name}`;
				let lists = [...event.file];
				let fileListLen = this[key].length

				lists.map((item) => {
					this[key].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[key][fileListLen]
					this[key].splice(fileListLen, 1, {
						...item,
						status: 'success',
						message: '',
						url: result
					})
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							"Content-Type": "application/form-data",
							// 'token': this.token
						},
						success: (res) => resolve(JSON.parse(res.data).data.fullurl)
					});
				})
			},

			// 身份证正面
			upload() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album', 'camera '], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.baseUrl+'/api/common/upload', //仅为示例，非真实的接口地址
							header: {
								"Content-Type": "application/form-data",
								// 'token': this.token
							},
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								this.addapplyAll.id_picture_z = data.data
									.fullurl
								console.log(this.addapplyAll.id_picture_z,
									"======")
							}
						});
					}
				});
			},


			// 身份证反面
			upload3() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album', 'camera '], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.baseUrl+'/api/common/upload', //仅为示例，非真实的接口地址
							header: {
								"Content-Type": "application/form-data",
								// 'token': this.token
							},
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								this.addapplyAll.id_picture_f = data.data
									.fullurl
								console.log(this.addapplyAll.id_picture_f,
									"======")
							}
						});
					}
				});
			}

		}
	};
</script>

<style lang="scss">
	page {
		background: #F4F4F7;
	}

	.radioSelect {
		width: 630rpx;
		display: flex;
		align-items: center;
		justify-content: left;
		margin: 34rpx auto;

		.radioSelect_img {
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}
		}


		view {
			font-size: 24rpx;
			color: #787B86;

			text {
				margin-left: 10rpx;
				color: green;
				font-weight: bold;
			}
		}
	}

	// 签名
	.preview {
		margin: 10rpx;
		border: 1rpx solid #aaaaaa;
		border-radius: 10rpx;
	}

	.text {
		margin: 20rpx;
		color: #aaaaaa;
	}

	.mineMoreAll2 {

		.mineMoreAll2_All {
			padding: 28rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.mineMoreAll_left {
				font-size: 30rpx;
				color: #232832;
				font-weight: bold;
			}

			.mineMoreAll_qian {
				font-size: 24rpx;
				color: #232832;
				border: 2rpx solid #787B86;
				padding: 5rpx 20rpx;
			}
		}


	}

	.mineMoreAll_Img {
		image {
			width: 500rpx;
			height: 350rpx;
		}
	}

	.middle {
		padding: 0 40rpx;
		box-sizing: border-box;

		.mineMore {
			background: #FFFFFF;
			border-radius: 28rpx;
			margin-top: 40rpx;

			.mineMoreAll {
				padding: 28rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				// justify-content: space-between;
				// align-items: center;
				// border-bottom: 2rpx solid #F4F4F7;

				.mineMoreAll_left {
					// width: 30%;
					font-size: 30rpx;
					color: #232832;
					font-weight: bold;
					margin-bottom: 20rpx;

					text {
						font-size: 24rpx;
						color: #787B86;
						font-weight: 400;
						margin-left: 10rpx;
					}
				}

				.mineMoreAll_right {
					display: flex;
					justify-content: flex-start;
					// width: 70%;

					image {
						width: 76rpx;
						height: 76rpx;
						border-radius: 100rpx;
						margin-right: 16rpx;
					}

					input {
						width: 100%;
						// text-align: right;
						font-size: 24rpx;
						color: #787B86;
						border-bottom: 1px solid #F4F4F7;
						padding: 10rpx;
					}

					.region {

						width: 100%;
						// text-align: right;
						font-size: 24rpx;
						color: #787B86;
					}
				}
			}
		}

		.middle_Btn {
			padding-bottom: 50rpx;

			.middle_Btn_one {
				display: block;
				width: 630rpx;
				height: 92rpx;
				line-height: 92rpx;
				background: green;
				border-radius: 46rpx;
				margin: auto;
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				margin-top: 50rpx;
			}

			.middle_Btn_two {
				display: block;
				width: 630rpx;
				height: 92rpx;
				line-height: 92rpx;
				// background: #fff;
				background-color: rgba(255, 255, 255, .2);
				border-radius: 46rpx;
				margin: auto;
				margin-top: 48rpx;

				text {
					display: block;
					font-size: 30rpx;
					font-weight: bold;
					color: #fff;
					text-align: center;
				}
			}

			// .radioSelect {
			// 	width: 630rpx;
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: left;
			// 	margin: 34rpx auto;

			// 	.radioSelect_img {
			// 		image {
			// 			width: 32rpx;
			// 			height: 32rpx;
			// 			margin-right: 12rpx;
			// 		}
			// 	}


			// 	view {
			// 		font-size: 24rpx;
			// 		color: #787B86;

			// 		text {
			// 			margin-left: 10rpx;
			// 			color: green;
			// 			font-weight: bold;
			// 		}
			// 	}
			// }
		}
	}
</style>